<template>
<view class="miou-activity-box"  v-show="indexPage=='activity'"
	:style="'height:'+windowHeight+'px'"
>
	<view class="mix-page-header" >
		<view class="content row" 
			:style="{
				paddingRight: headerPaddingRight + 'px',
				paddingTop: statusBarHeight + 'px',
				height: navigationBarHeight + statusBarHeight + 'px'
			}"
		>
			<view class="location-box flex text-black" @click="againLocation">
				<view class="cuIcon-location"></view>
				<view class="margin-left-xs text-sm">{{user.city}}</view>
			</view>
			<view class="search-wrap center" :style="{height: customHeight + 'px'}" >
				
				<view class="nav-list">
					<view class="nav z">
						<block v-for="(item, index) in navList" :key="index">
							<view class="cu-item"
								:class="index==tabCurrentIndex ? 'select' : ''"
								@tap="tabSelect"
								:data-index="index"
							>
								<view>{{ item.text }}</view>
								<view class="tab-dot bg-black"></view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="btn center" 
				v-show="tabCurrentIndex==0"
				@tap="showModal" 
				data-target="filterModal"
			>
				<image class="filter-icon" src="/static/img/ic_nearpeople_screen.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 占位栏 -->
		<view :style="[{minHeight: navigationBarHeight+statusBarHeight+'px'}]"></view>
	</view>
		
		
		
		
		
	<!-- 显示区域 -->
	<swiper :current="tabCurrentIndex" 
		class="swiper-box"
		duration="300" 
		:style="[{height:'calc(100vh - '+ navigationBarHeight + 'px - 140rpx)'},{top: navigationBarHeight + 'px'}]"
		@change="changeTab">
		<swiper-item class="tab-content"  >
			<scroll-view 
				class="list-scroll-content" 
				scroll-y
				@scrolltolower="loadData"
			>
				
				<!--搜索框-->
				<view class="cu-bar search miou-search-box">
					<view class="search-form round" @click="$jumpPages('search',{type: 'game'})">
						<text class="cuIcon-search" />
						<text>搜索相关活动</text>
					</view>
				</view>
				
				<!-- 空白页 -->
				<empty v-if="navList[0].loaded === true && navList[0].list.length === 0"
				></empty>
				
				<!-- 活动列表 -->
				<view class="activity-list" v-else>
					<block v-for="(item,index) in navList[0].list" :key="index">
						<ViewScenario :activity="item" ></ViewScenario>
					</block>
					<uni-load-more :status="navList[0].loadingType"></uni-load-more>
				</view>
				 
				
			</scroll-view>
		</swiper-item>
			
		
		
		<swiper-item class="tab-content"  >
			<scroll-view 
				class="list-scroll-content" 
				scroll-y
				@scrolltolower="loadData"
			>
			
				<!--搜索框-->
				<view class="cu-bar search miou-search-box">
					<view class="search-form round" @click="$jumpPages('search',{type: 'shop'})">
						<text class="cuIcon-search" />
						<text>搜索相关店家</text>
					</view>
				</view>
				
				
				<!-- 空白页 -->
				<empty v-if="navList[1].loaded === true && navList[1].list.length === 0"
				></empty>
				
				<!-- 订单列表 -->
				<view class="shopInfo-list">
					<block v-for="(item,index) in navList[1].list" :key="index">
						<ViewBusiness :shopInfo="item" ></ViewBusiness>
					</block>
					<uni-load-more :status="navList[1].loadingType"></uni-load-more>
				</view>
				 
				
			</scroll-view>
		</swiper-item>
		
		
		
	</swiper>
	
	
	<!-- 侧边栏 -->
	<gameFilter
	    :show="modalName=='filterModal'"
	    @closeTap="hideModal"
		@affirmTap="affirmTap"
		@resetConfig="resetConfig"
	></gameFilter>
	
	
	<view class="add-game" @click="addAct">
		<image src="/static/img/icon_add.png" mode="widthFix"></image>
	</view>
	
	<!-- add活动 
	<view class="cu-modal bottom-modal" :class="modalName=='addGameModal'?'show':''">
		<view class="cu-dialog " :style="'height:'+windowHeight+'px'">
			
			<view class="game-icon-list">
				<view class="grid col-3 padding-sm">
					<view class="padding-xs" v-for="(item,index) in gameTypeList" :key="index">
						<view class="padding-tb-sm radius text-center shadow-blur radius">
							<image class="icon" :src="'/static/img/' + item.icon" />
							<view class="margin-top-xs text-Abc text-bold">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="padding-xl" @click="hideModal">
					<text class="cuIcon-close "></text>
				</view>
			</view>
		</view>
	</view>
	-->
</view>
</template>

<script>
import  appMixin from './appMixin';
import gameFilter from './gameFilter.vue';
import ViewScenario from './../box/ViewScenario.vue';
import ViewBusiness from './../box/ViewBusiness.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty.vue";
import { Game } from '@/models/game.js';
import { User } from '@/models/user.js';
let user = new User()
export default {
	name: 'ViewActivity',
	mixins: [appMixin],
	components: {
		gameFilter,
		ViewScenario,
		ViewBusiness,
		uniLoadMore,
		empty
	},
	data() {
		return {
			user: user,
			tabCurrentIndex: 0,
			otherParams: {},
			navList: [
				{
					id: 1,
					text: '活动',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					id: 2,
					text: '商家',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				}
			]
		};
	},
	computed: {
		statusBarHeight(){
			return this.systemInfo.statusBarHeight
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		},
		customWidth(){
			return this.systemInfo.custom.width;
		},
		customHeight(){
			return this.systemInfo.custom.height;
		},
		//小程序右侧需要留出气泡空间
		headerPaddingRight(){
			// #ifndef MP
			return 0;
			// #endif
			// #ifdef MP-WEIXIN
			return this.customWidth + 20;
			// #endif
		},
	},
	mounted() {
		this.loadData()
	},
	methods: {
		addAct() {
			this.$mTool.showModal({
				title: '提示',
				content: '如需发布活动，请联系商家！',
				showCancel: false
			})
		},
		againLocation(){
			this.$mTool.showModal({
				title: '提示',
				content: '是否重新定位？',
				success: (res) => {
					if (res.confirm) {
					   user.getLocation()
					}
				}
			})
		},
		loadData(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			if(source === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading' || navItem.loadingType === 'noMore'){
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			
			switch(index) {
				case 0: 
					this.getGameNewList()
				break;	
				case 1: 
					this.getGameShopList()
				break;
			}	
		}, 
		//顶部tab点击
		tabSelect(e) {
			this.tabCurrentIndex = e.currentTarget.dataset.index;
		},
		//swiper 切换
		changeTab(e){
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		adImgTap() {
		    this.modalName = null;
		    console.log('图片被点击');
		},
		
		refresh(){
			if(this.indexPage=='activity') {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				navItem.pagenum = 0
				navItem.loadingType = 'more'
				navItem.list = []
				this.loadData();
			}
		},
		resetConfig() {
			this.otherParams = {}
		},
		affirmTap(config) {
			this.otherParams = config
			let navItem = this.navList[0];
			navItem.pagenum = 0
			navItem.loadingType = 'more'
			navItem.list = []
			this.loadData();
		},
		async getGameNewList() {
			let navItem = this.navList[0];
			navItem.pagenum = navItem.pagenum + 1
			let gameNewList = await Game.getGameNewList({
				pagenum: navItem.pagenum,
				...this.otherParams
			})
			navItem.loaded = true
			gameNewList.forEach(item => {
				navItem.list.push(item)
			})
			if (!gameNewList.length) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		async getGameShopList() {
			let navItem = this.navList[1];
			navItem.pagenum = navItem.pagenum + 1
			let gameShopList = await Game.getGameShopList(navItem.pagenum)
			navItem.loaded = true
			gameShopList.forEach(item => {
				navItem.list.push(item)
			})
			if (!gameShopList.length) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		
	}
}
</script>

<style lang="scss" scoped>
.mix-page-header{
	.content{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
		background-color: #fff;
	}
	.location-box{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		padding: 0 24rpx;
		font-weight: 400;
		color: #000000;
	}
	.btn{
		width: 88rpx;
		height: 80rpx;
		padding: 10rpx 24rpx;
		position: relative;
	}
	.search-wrap{
		flex: 1;
		font-size: 14px;
		color: #999;
		/* #ifdef H5 */
		margin-right: 24rpx;
		/* #endif */
	}
	.filter-icon{
		width: 30rpx;
	}
}
	.list-scroll-content{
		height: 100%;
		.search-form{
			background-color: #f9f9f9;
		}
	}
	.activity-nav{
		height: 100rpx;
	}
	.cu-dialog {
	    background-color: rgba(248, 248, 248, 0.95);
	}
	.add-game{
		position:fixed;
		right: 0;
		z-index: 999;
		width: 100rpx;
		height: 100rpx;
		bottom: 120rpx;
		right: 30rpx;
	}
	.game-icon-list{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		.icon{
			width: 136rpx;
			height: 136rpx;
		}
		.cuIcon-close {
			font-size: 40rpx;
			font-weight: 700;
		}
	}
	.nav-list{
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.nav.z{
			color: #666;
			.cu-item {
			    height: 80rpx;
			    line-height: 80rpx;
				font-weight: 400;
				font-size: 30rpx;
			    position: relative;
				&.select {
					color: #000;
					font-size: 32rpx;
					.tab-dot {
					    position: absolute;
					    height: 5rpx;
					    border-radius: 10px;
					    bottom: 0;
					    left: 0;
					    right: 0;
					    width: 72rpx;
					    margin: auto;
					}
				}
			}
		}
	}
	

</style>
